<template>
	<view class="bgc">
	<!-- 	<u-sticky offset-top="0">
			<view class="infoimg" :style="{height:`${barHeight}px`}">
				
				<view class="infoitem" :style="{paddingTop: `${barHeight-24}px`}">
					<img mode="fade" class="imags" src="@/static/images/logtxt.png" alt="">
				</view>
			</view>
		</u-sticky>
		<view class="contentbox">
			<view class="content"></view>
		</view> -->
		<view class="petcard">
			<view class="pettabbox">
				<view class="pettab">
					<view class="petname" :class="{petactive: (i+1)==sactive}" v-for="(v,i) in pettablist" @click="tabpetlist(v,i)">
						{{v.name}}
					</view>
				</view>
			</view>
			<view class="petimg">
				<view class="aboutpet">
					<view class="header">
						<template v-if="!sitem.image">
							<img v-if="sitem.petType==1"  class="headerimg" src="@/static/images/dogc.png" alt="">
							<img v-if="sitem.petType==2"  class="headerimg" src="@/static/images/catc.png" alt="">
						</template>
						<img v-else  class="headerimg" :src="sitem.image" alt="">
					</view>
					<view class="petmsg">
						<view class="petinfoname">
							<view class="pname">
								{{sitem.name}}
							</view>
							<view class="icon"></view>
						</view>
						<view class="submsg">
							<view class="petage">{{getage()}}岁</view>
							<view class="petstatus">{{sitem.sterilization==1?'已绝育':'未绝育'}}</view>
						</view>
					</view>
					<view class="addpet" @click="addpetfn">添加</view>
				</view>
				<view class="remark">{{sitem.latestSchedule}}</view>
			</view>
		</view>
		<view class="timetree">
			<view class="tree">
				<view class="left centep">
					今天
				</view>
				<view class="centes cente"></view>
				<view class="right centep rights">
					<view class="btn" @click="addrecod">添加新记录</view>
				</view>
			</view>
			<view class="tree" v-for="item in petSchedules" :key="item">
				<view class="left" @click="change(item)">
					<view class="leftinfo">
						<view class="litdate">
							<view class="">{{setvalue(0,2,item)}}</view>
							<view class="">{{setvalue(2,4,item)}}</view>
						</view>
						<view class="bigdate">
							<view class="">{{setvalue(5,7,item)}}</view>
							<view class="">/</view>
							<view class="">{{setvalue(8,10,item)}}</view>
						</view>
					</view>
				</view>
				<view class="cente"></view>
				<view class="right" @click="change(item)">
					<view>
						{{item.notes}}
					</view>
					<template v-if="item.images.length">
						<view class="rigimg" v-for="(iv,index) in item.images">
							<img class="rimg" :src="iv" alt="">
						</view>
					</template>
				</view>
			</view>
			<view class="ftips" v-if="!petSchedules.length">暂无记录</view>
		</view>
		<u-popup :show="popshow" :round="10" closeable mode="bottom" @close="close" @open="open">
			<view class="popHeight">
				<view class="popti">{{poptittxt}}</view>
				<scroll-view :scroll-y="true" style="height: 70vh;">
					<view class="fbox">
						<view class="flabel frequire">时间</view>
						<view class="finput">
							<view @click="selectdate">
								<u--input class="inputtxtright" v-model="popparams.scheduleDate" suffixIcon="arrow-right"
									suffixIconStyle="color: #858585" disabled disabledColor="#ffffff" inputAlign="right"
									placeholder="请选择出生日期" border="none"></u--input>
							</view>
						</view>
					</view>
					<view>
						<view class="addcontent">
							<view class="info">内容</view>
							<view class="info">{{popparams.notes.length}}/50</view>
						</view>
						<view class="addtext">
							<u--textarea maxlength="50" class="textareaBox" v-model="popparams.notes" height="100" placeholder="请输入纪录内容…"
								border="bottom"></u--textarea>
						</view>
					</view>
					<view>
						<view class="addcontent">
							<view class="info">照片</view>
							<view class="info">0/3</view>
						</view>
						<view class="">
							<view class="uploadbox">
								<u-upload :fileList="filelist" @delete="deletePic" @afterRead="afterRead" name="6" multiple :maxCount="3" width="65" height="65">
									<view class="uploadstyle">
										<view>
											<view class="icobox">
												<u-icon name="plus" bold class="plusIcon"></u-icon>
											</view>
											<view class="imgtext">上传照片</view>
										</view>
									</view>
								</u-upload>
							</view>
						</view>
					</view>
					<view class="repeat">
						<view class="regrid">
							<view class="gtitle">是否重复</view>
							<view class="gsbtn">
								<view class="gitem" :class="{gactive:popparams.cycle=='M'}" @click="repeat('M')">月</view>
								<view class="gitem" :class="{gactive:popparams.cycle=='W'}" @click="repeat('W')">周</view>
								<view class="gitem" :class="{gactive:popparams.cycle=='D'}" @click="repeat('D')">日</view>
								<view class="gitem" :class="{gactive:popparams.cycle=='N'}" @click="repeat('N')">否</view>
							</view>
						</view>
					</view>
					<view class="fbtn">
						<up-button type="primary" size="large" color="#DEA89C" :shape="'circle'" text="保存" @click="saveRcod"></up-button>
					</view>
				</scroll-view>
 			</view>

		</u-popup>
		<u-datetime-picker confirmColor='#dea89c'  @confirm="selectdateVal" @cancel="showDate=false" :minDate="946684800000"
			:maxDate="maxDate" :show="showDate" v-model="radiovalue1" mode="date"></u-datetime-picker>
	</view>
</template>
<script>
	import {getcurrentpetnnfo,posschedule,posscheduleput} from '@/pages/api/apihost.js'
	import mixins from '@/pages/mxin/mxin.js'
	export default {
		name: '宠物基本信息',
		mixins:[mixins],
		// props:['pettablist'],
		data() {
			return {
				radiovalue1: new Date(),
				maxDate:new Date(`${new Date().getFullYear()+2}-12-31`).getTime(),
				showDate: false,
				statusBarHeight: 0,
				barHeight: 0,
				popshow: false,
				pettablist:[],
				poptittxt:'添加新记录',
				value3: '',
				sactive:1,
				sitem:{},
				petSchedules:[],
				popparams:{
					notes:'',
					scheduleDate:'',
					image:'',
					cycle:'',
					petId:'',
				}
			}
		},
		onShow(){
		},
		// onLoad() {
		// 	this.getpetinfo()
		// },
		// onShow() {
		// 	this.getpetinfo()
			
		// },
		methods: {
			change(v){
				let arrimg=[]
				this.popparams.notes=v.notes
				this.popparams.scheduleDate=v.scheduleDate
				v.images.forEach(v=>{
					arrimg.push({
						url:v,
						status:'success'
					})
				})
				this.filelist=arrimg
				this.popparams.cycle=v.cycle
				this.poptittxt='修改记录'
				this.popshow=true
			},
			setvalue(i,v,item){
				let iv=item.scheduleDate
				return iv.slice(i,v)
			},
			addpetfn(){
				// this.$emit("onadd")
				uni.navigateTo({
					url: "/petselfinfo/mypet"
				})
			},
			repeat(v){
				this.popparams.cycle=v
			},
			saveRcod(){
				let url=[]
				let flag=false
				if(!this.popparams.cycle&&!this.popparams.notes&&!this.popparams.scheduleDate){
					uni.$u.toast('请确认输入项是否完整')
					return
				}
				
				this.filelist.forEach(v=>{
					console.log(v.url, 'viote')
					if(v.status!='success'){
						uni.$u.toast('请确认图片是否上传')
						flag=true
						return
					}
					url.push(v.url)
					
				})
				this.popparams.image=url.join(',')
				console.log(this.sitem, 'sitem')
				// this.popparams.petId=this.sitem.petId
				
				if(flag){
					return
				}
				if(this.poptittxt=='添加记录'){
					posschedule(this.popparams).then(r=>{
						uni.$u.toast('提交成功')
						for(let key in this.popparams){
							this.popparams[key]=''
						}
						this.popshow=false
						this.getlistfn('add')
					})
				} else{
					posscheduleput(this.popparams).then(r=>{
						uni.$u.toast('修改成功')
						for(let key in this.popparams){
							this.popparams[key]=''
						}
						this.popshow=false
						this.getlistfn('add')
					})
				}
				
			},
			tabpetlist(v,i){
				this.sactive=i+1
				this.sitem={...v}
				this.petSchedules=v.petSchedules
				this.popparams.petId=v.petId
				console.log(v, 'petSchedulesa')
			},
			getsterilization(){
				
			},
			getage(){
				let cy=new Date().getFullYear()
				let by= this.sitem.hasOwnProperty('dateBirth')?this.sitem.dateBirth.split('-')[0]:0
				return cy-by
			},
			getpetinfo(v,f,add){
				v.forEach(iv=>{
					iv.petSchedules.forEach(iiv=>{
						if(iiv.image){
							iiv.images=iiv.image.split(',')
						} else{
							iiv.images=[]
						}
					})
				})
				this.pettablist=[]
				this.pettablist.push(...v)
				if(!f&&this.sactive==1){
					this.sitem=v[0]
					this.petSchedules=v[0].petSchedules
					this.sactive=1
				}
				this.sitem=v[this.sactive-1]
				this.petSchedules=v[this.sactive-1].petSchedules
			},
			getlistfn(add){
				setTimeout(()=>{
					getcurrentpetnnfo().then(r=>{
						
						this.getpetinfo(r,'flag',add)
					})
				},500)
			},
			selectdateVal(v) {
				let t = new Date(v.value)
				let y = t.getFullYear()
				let M = t.getMonth() + 1
				let d = t.getDate()
				M > 9 ? M = M : M = `0${M}`
				d > 9 ? d = d : d = `0${d}`
				let end = `${y}-${M}-${d}`
				this.popparams.scheduleDate=end
				this.showDate = false
			},
			selectdate() {
				this.showDate = true
			},
			addrecod() {
				this.poptittxt='添加记录'
				this.popshow = true
			},
			close() {
				this.popshow = false
				this.showDate=false
			},
			open() {

			},
		}
	}
</script>
<style lang="scss" scoped>
	.ftips{
		text-align: center;
		color: #d8d8d8;
		font-size: 24rpx;
		margin-top: 40rpx;
		border-top: 1px solid #d8d8d8;
		padding-top: 20rpx;
	}
	.uploadbox{
		padding-top: 24rpx;
	}
	.textarea{
		padding: 10rpx 0rpx !important;
	}
	.leftinfo {
		display: flex;
		// border: 1rpx solid #333;
		justify-content: center;
		border-radius: 15rpx;
		padding: 10rpx;
		margin-top: 32rpx;

		.litdate {
			font-size: 18rpx;
			line-height: 18rpx;
			padding-right: 10rpx;
			padding-top: 4rpx;
		}

		.bigdate {
			display: flex;
			font-size: 36rpx;
			line-height: 36rpx;
			font-weight: 500;
		}
	}

	.fbtn {
		padding: 37rpx 0rpx 27rpx 0rpx;
	}

	.repeat {
		.regrid {
			display: grid;
			grid-template-columns: 150rpx auto;
			padding: 71rpx 0rpx 45rpx 0rpx;
			border-top: 1rpx solid #D8D8D8;
			margin-top: 64rpx;
		}

		.gsbtn {
			display: flex;
			justify-content: space-around;
		}

		.gitem,
		.gtitle {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #858585;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
			line-height: 48rpx;
		}

		.gactive {
			background: #F7ECE5;
			border: 1rpx solid rgba(222, 168, 156, 1);
			border-radius: 24rpx;
			padding: 10rpx 40rpx;
			line-height: 28rpx;
		}
	}

	.addcontent {
		display: flex;
		justify-content: space-between;
		padding-top: 45rpx;
		font-family: PingFangSC-Regular;
		color: #858585;
		letter-spacing: 0;
		text-align: right;
		font-weight: 400;
	}

	.uploadstyle {
		border: 1px solid rgba(216, 216, 216, 1);
		border-radius: 16rpx;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #858585;
		font-size: 24rpx;
		.plusIcon {
			display: flex;
			justify-content: center;
			font-weight: bolder;
			text-align: center;
		}
	
		.imgtext {
			padding-top: 16rpx;
		}
	}
	

	.popHeight {
		padding: 0rpx 30rpx;
	}

	.flabel {
		padding-left: 10rpx;
		color: #858585;
	}

	.fbox {
		padding-top: 81rpx;
		display: grid;
		grid-template-columns: 160rpx auto;
		height: 110rpx;
		line-height: 110rpx;
		align-items: center;
		border-bottom: 1rpx solid #d8d8d8;
	}

	.inputtxtright {
		text-align: right;
	}

	.popti {
		font-family: PingFangSC-Medium;
		font-size: 40rpx;
		padding-top: 64rpx;
		color: #28282C;
		text-align: center;
		line-height: 40rpx;
		font-weight: 500;
	}

	.rigimg {
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: 110rpx 110rpx 110rpx;
		grid-gap: 0rpx 21rpx;

		.rimg {
			width: 110rpx;
			height: 110rpx;
		}
	}

	.addpet {
		margin-top: 22rpx;
		background: #F7ECE5;
		border: 1rpx solid rgba(222, 168, 156, 1);
		border-radius: 24rpx;
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #C68B7D;
		letter-spacing: 0;
		line-height: 48rpx;
		font-weight: 400;
		height: 48rpx;
		text-align: center;
	}

	.petmsg {
		color: #fff;
		padding-left: 38rpx;
		padding-top: 20rpx;

		.submsg {
			display: flex;
			font-size: 24rpx;
			color: #FFFFFF;
			letter-spacing: 0;
			line-height: 24rpx;
			font-weight: 400;

			.petage {
				padding-right: 18rpx;
				border-right: 1px solid #fff;
			}

			.petstatus {
				padding-left: 18rpx;
			}
		}

		.pname {
			font-size: 40rpx;
			font-weight: 600;
			padding-bottom: 28rpx;
		}
	}

	.aboutpet {
		display: grid;
		grid-template-columns: 132rpx 346rpx 132rpx;

		.headerimg {
			width: 132rpx;
			height: 132rpx;
			border-radius: 66rpx;
		}
	}

	.petimg {
		background: url('@/static/images/card.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding: 41rpx 40rpx 30rpx 40rpx;
		margin-top: 15rpx;
	}

	.remark {
		margin-top: 30rpx;
		background: rgba(247, 236, 229, .2);
		padding: 10rpx 25rpx;
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 28rpx;
		font-weight: 400;
		border-radius: 10rpx;
	}
	.pettabbox{
		max-width: 100vw;
		overflow-y: auto;
		height: 60rpx;
	}
	.pettab {
		display: flex;
		.petname {
			display: inline-block;
			padding: 10rpx 40rpx;
			background: #F7ECE5;
			border-radius: 50rpx;
			font-size: 26rpx;
			color: #C68B7D;
			letter-spacing: 0;
			line-height: 22rpx;
			height: 28rpx;
			font-weight: 400;
			margin-right: 16rpx;
			white-space: nowrap;
		}

		.petactive {
			// background: #C68B7D;
			background: url("@/static/images/bgbtn.png");
			background-size: 100% 100%;
			background-position-y: 0rpx;
			background-repeat: no-repeat;
			color: #fff;
		}
	}

	.petcard {
		padding: 40rpx 30rpx 0rpx 30rpx;
	}

	.bgc {
		background: #f7f7f7;
		min-height: 100vh;
	}

	.infoimg {
		width: 100%;
		background-image: url("https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png");
		background-size: 100% auto;

		.infoitem {
			padding-left: 31rpx;

			.imags {
				width: 215rpx;
				height: 48rpx;
			}
		}
	}

	.contentbox {
		background: #dea89c;
		height: 40rpx;
	}
	.icobox{
		display: flex;
		justify-content: center;
	}
	.content {
		height: 40rpx;
		background-image: url("@/static/images/bg2.png");
		background-size: 100% auto;
		position: relative;
		// top: -20rpx;
		// bac
		// height: 500vh;
	}

	.timetree {
		padding: 60rpx 30rpx 60rpx 30rpx;
	}

	.tree {
		display: grid;
		grid-template-columns: 210rpx 1rpx auto;

		.left {
			display: inline-block;
			text-align: right;
			padding-right: 36rpx;
			padding-bottom: 24rpx;
			background: url('@/static/images/blin.png');
			background-repeat: no-repeat;
			background-position-y: 30rpx;
			font-size: 29rpx;
			text-align: center;
			font-weight: bold;
			
		}

		.cente,
		.centes {
			background: #DEA89C;
			position: relative;
			padding-bottom: 24rpx;
		}


		.centep {
			padding-top: 40rpx;
		}



		.cente::after {
			display: block;
			position: absolute;
			left: -14rpx;
			top: 40rpx;
			content: '';
			width: 31rpx;
			height: 31rpx;
			border-radius: 50%;
			background: #DEA89C;
		}

		.right {
			padding-left: 36rpx;
			margin-bottom: 30rpx;
			background: rgba(247, 236, 229, .5);
			margin-left: 30rpx;
			border-radius: 18rpx;
			padding: 20rpx 25rpx 20rpx 30rpx;
			font-family: PingFangSC-Regular;
			font-size: 26rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 44rpx;
			font-weight: 400;
		}

		.rights {
			background: #f7f7f7;

			.btn {
				padding: 18rpx 28rpx;
				background: rgba(247, 236, 229, .5);
				display: inline-block;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #C68B7D;
				letter-spacing: 0;
				line-height: 28rpx;
				font-weight: 400;
				border-radius: 18rpx;

			}
		}
	}

	.popHeight {
		min-height: 75vh;
	}
</style>